<template>
			<div class="realCaseRank">
		
			<div  class="r_report_con">
				<div v-for="(item,key) in RankTop8" :title="item.name" :key="item.index" :style="'height:'+((100/RankTop8.length)+0.5)+'%'" class="r_con_row clear  index_r">
					<div class="r_con_row_title f_l row_w41"  :class="key+1<4?'overflowint '+'top'+(key+1):''" ><span :class="key+1<4?'iconfont  icon-wangguan':''">{{(key>2)?key+1+'、':''}}</span><font>{{item.name}}</font></div>
					<div class="row_w58 f_l">
						<div class="r_ron_progress">
							<div class="r_progress_bar " :style="{'width':((item.value-(RankTop8[RankTop8.length-1].value)*0.9)/(RankTop8[0].value- (RankTop8[RankTop8.length-1].value)*0.9 ))*100+'%'}"></div>
						</div>
					</div>
           <div class="r_con_value"  :style="item.value.toString().length>=10?'right:0':''" :class="key+1<4?'top'+(key+1):''">
                  {{item.value}}{{item.unit}}
          </div>
				</div>
			</div>
		</div>
</template>
<style lang="scss">
.realCaseRank {
	font-family: "pingfangmedium", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1;
	height: 100%;
	width: 100%;
   color: #b0b0b0;
	font-size: 14px;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;/* for Chrome */
	-moz-user-select: none; /* for Firefox */

		.r_report_con{      
			position: relative;
			padding:13px 49px 5px 20px;
      text-align: center;
      height: 100%;
		}
		.r_con_row.index_r{     
			margin-left: 0;
			margin-right: 0;	
			&::after,&::before{
				content: '';
				display: table;
        clear: both;
      }
      
      &:nth-child(1),&:nth-child(2),&:nth-child(3){
        .r_con_row_title{
          .iconfont{
            font-size: 1vw;
            margin-right: 3%;  
          }
          font-weight: bold;
          font-size: 14px;
          line-height: 20px;
          height: 20px;
          color: #b0b0b0;
          font{
            
                transform: translateY(10%);
          }
        }
      }
			.r_con_row_title{
				position: relative;
				min-height: 1px;
				font-size: 12px;
        text-align: left;
        span{
          color:#4b88ea;
        }
        font{
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 75%;
          display: inline-block;
          vertical-align: sub;
        }
			}
			.f_l {
				float: left;
			} 
			.row_w41{
        width: 30%;
        color: #4b88ea;
        &.overflowint{
          &.top1{
            color: #ffec8c;
            span{
              color: #ffec8c;
              &::after{
                    content: '1';
                 }
            }
          }
          &.top2{
              color:#80aeff;
              span{
                 &::after{
                    content: '2';
                 }
                color: #80aeff;
            }
          }
          &.top3{
            color: #80aeff;
            span{
              &::after{
                    content: '3';
                 }
              color: #80aeff;
            }
          } 
          overflow: initial;
          
          margin-left: -10px;
          margin-top: -5px;
          span{
            text-align: center;
            position: relative;
            color: #4b88ea;
            &::after{
              content: '1';
              font-size: 12px;
              line-height:1;
              display: inline-block;
              color: #edf1f7;
              position: absolute;
              left: 61%;
              top: 69%;
              transform: translate(-50%,-50%);
            }
          }
        }
      }
			.row_w58{				
				width: 57%;
				margin-right: 52px;
        float: right;
				.r_ron_progress{
					margin-bottom: 12px;
					height: 14px;
					overflow: hidden;
					background-color:transparent;
					-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
					box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
					.r_progress_bar{
						float: left;
						width: 0;
						font-size: 12px;
						height: 100%;
						line-height:1;
						transition: width .6s ease;
						text-align: center;
						color: #fff;
						background-size: 40px 40px;
            position: relative;
            background: -webkit-linear-gradient(left, #000105 , #0c78dd); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #000105 , #0c78dd); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #000105 , #0c78dd); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #000105 , #0c78dd); /* 标准的语法（必须放在最后） */
           
            span{
              position: absolute;
              left: 50%;
              line-height: 1.3;
              transform: translateX(-50%);
              z-index: 999;
            }
            &::before{
              content: '';
              position: absolute;
              display: block;
              width: 0px;
              height: 0px;
              border: 20px solid transparent;
              border-right: 10px solid #000105;
              right: 0;
              top:0;
            }
				}
					
				}
      }
      .r_con_value{
        position: absolute;
        right: 2%;
        line-height: 20px;
        white-space: nowrap;
        margin-top: -0.5%;
        color: #4b88ea;
        &.top1{
          color: #ffec8c;                
          }
          &.top2{
              color:#80aeff;                    
          }
          &.top3{
            color: #80aeff;                
          } 
       }
    }
    //中等
    .report_con{
			position: relative;
			padding:  0 80px 20px 80px;
			text-align: center;
			.con_title{
				
				text-align: left;
				span{
					font-size: 28px;
					line-height: 50px;
					vertical-align: middle;
          color: #5580ff;
          font-weight: bold;
				}
				>label{
					font-size: 14px;
					color: #fff;
					font-weight: normal;
					line-height: 1.15;
					text-align: center;
					vertical-align: sub;
					margin-left: 10px;	
				}
			}
			.con_con{
				text-align: left;
				margin-top: 15px;
				span{
					&:last-child{
						float: right;
					}
					font-size: 14px;
          line-height: 1;

					i{
						color: #3a87ad;font-weight: bold;
						>i{margin-right:3px;}
					}
          
					>span{color: #3a87ad;}
					.i_red{
						color: #d83d2d;
						i{
							color: #d83d2d;
						}
					}
					.i_green{
						color:#038506;
						i{
							color:#038506;
						}
					}
				}
			}
			.con_pic{
				margin: 5px 0;
				position: relative;
				display: inline-block;
				vertical-align: top;
				text-align: center;
				&.pic_dp{
					margin:20px 0 0 0 ;
				}
				.percent{
					position: absolute;
					left: 130px;
					bottom: 18px;
					i{
						color:#428bca;
						&:hover{
							color:#486d93;
						}
					}
				}
				.icon_bg{
					display: inline-block;
					width: 222px;
					height: 142px;
					vertical-align: -webkit-baseline-middle;
				}

			}
			.extra{
				text-align: center;
        width: 100%;
				height: 24px;
				.ex2{
					float: left;
					&:nth-child(2){
						float: right;
					} 
				}

				span{
					line-height: 24px;

          span{
            font-size: 24px;            
            font-weight: bold;

            color:#5580ff;
            display: inline-block;
            vertical-align: sub;
						&:hover{
							color:#4263c7;
						}
					}
				}
			}
		}
	
}


</style>
<script>
export default {
  props: {
	RankTop8:{
		default:function(){
			return 	[									//Rank前12 {name:'名字',value:'99350'}
					{name:"0",value:1000},
					{name:"0",value:200},
					{name:"0",value:100},
					{name:"0",value:0},
					{name:"0",value:0},
					{name:"0",value:0},
					{name:"0",value:0},
					{name:"0",value:0},
				]
		}
	}
  },
  data:function() { 
    return {
	
	};

  },
  created() {},
  mounted() {

  },
  methods: {

  },
  watch: {}
};
</script>

